<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 页面字符集 -->
    <meta charset="utf-8">
    <!--  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport宽度为device-width，初始缩放为1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML学习</title>

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    <style>
        .itutu-title {
            margin: 10px;
            font-size: 2rem;
            color: lightcoral;
            display: block;
        }

        .itutu-title span {
            font-size: 0.8rem;
            color: lightblue;
        }
    </style>
</head>

<body>
    <p class="itutu-input">
        <div class="itutu-title">text
            <span></span>
        </div>
        <input type="text">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">button
            <span></span>
        </div>
        <input type="button">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">checkbox
            <span></span>
        </div>
        <input type="checkbox">
    </p>
    <p class="itutu-input">
            <div class="itutu-title">radio
                <span></span>
            </div>
            <input type="radio">
        </p>
    <p class="itutu-input">
        <div class="itutu-title">color
            <span></span>
        </div>
        <input type="color">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">date
            <span></span>
        </div>
        <input type="date">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">month
            <span></span>
        </div>
        <input type="month">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">week
            <span></span>
        </div>
        <input type="week">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">time
            <span>time</span>
        </div>
        <input type="time">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">datetime
            <span>年月日时间 无时区</span>
        </div>
        <input type="datetime">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">datetime-local
            <span>年月日时间 无时区</span>
        </div>
        <input type="datetime-local">
    </p>

    <p class="itutu-input">
        <div class="itutu-title">email
            <span>提交表单时，会自动验证 email 域的值</span>
        </div>
        <input type="email">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">file
            <span></span>
        </div>
        <input type="file">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">url
            <span>提交表单时，会自动验证 url 域的值</span>
        </div>
        <input type="url">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">hidden
            <span></span>
        </div>
        <input type="hidden">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">image
            <span>src图片地址，alt图片提示，width图片宽度，height图片高度</span>
        </div>
        <input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523897775555&di=19851dbd4ea8cee1154f695660533c43&imgtype=0&src=http%3A%2F%2Fwww.jlonline.com%2Fpet%2Fd%2Ffile%2F2017-05-10%2Fc24166633fe4aebe4338659692e5943e.jpg"
            alt="虎皮鹦鹉" width="400" height="300">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">number
            <span>name数字名，value默认值，min最小值，max最大值，step数字间隔</span>
        </div>
        <input type="number" name="points" min="1" max="10" step="2" value="2">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">range
            <span>name数字名，value默认值，min最小值，max最大值，step数字间隔</span>
        </div>
        <input type="range" name="points" min="1" max="10">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">password
            <span>不显示数字，不能复制</span>
        </div>
        <input type="password">
    </p>
    
    <p class="itutu-input">
        <div class="itutu-title">reset
            <span></span>
        </div>
        <input type="reset">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">search
            <span>用于搜索，但是显示为文本域</span>
        </div>
        <input type="search">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">submit
            <span></span>
        </div>
        <input type="submit">
    </p>
    <p class="itutu-input">
        <div class="itutu-title">tel
            <span></span>
        </div>
        <input type="tel">
    </p>
</body>

</html>